<script setup lang="ts">
import { PlusIcon } from "lucide-vue-next"
import { Button } from "@/registry/new-york/ui/button"
import { ButtonGroup } from "@/registry/new-york/ui/button-group"
</script>

<template>
  <div class="flex flex-col items-start gap-8">
    <ButtonGroup>
      <Button variant="outline" size="sm">
        Small
      </Button>
      <Button variant="outline" size="sm">
        Button
      </Button>
      <Button variant="outline" size="sm">
        Group
      </Button>
      <Button variant="outline" size="icon-sm">
        <PlusIcon />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button variant="outline">
        Default
      </Button>
      <Button variant="outline">
        Button
      </Button>
      <Button variant="outline">
        Group
      </Button>
      <Button variant="outline">
        <PlusIcon />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button variant="outline" size="lg">
        Large
      </Button>
      <Button variant="outline" size="lg">
        Button
      </Button>
      <Button variant="outline" size="lg">
        Group
      </Button>
      <Button variant="outline" size="icon-lg">
        <PlusIcon />
      </Button>
    </ButtonGroup>
  </div>
</template>
